<style lang="less">
@import "./message.less";
</style>

<template>
    <div class="message">
        <p slot="title" class="message-title">
            全部消息
        </p>

        <div>
            请选择消息类型：
            <Select v-model="messageTypeModel" style="width:200px" @on-change="changeMessageType">
                <Option v-for="(item, index) in messageTypeList" :value="item.code" :key="index">{{ item.description }}</Option>
            </Select>
        </div>

         <div class="right-table mt-20">
             <div>
                <Button @click="delMessage">删除</Button>
                <Button @click="readMessageLogBatch">标记为已读</Button>
                <Button @click="readMessageLogAll">全部标记为已读</Button>
            </div>
            <Table :columns="messageColumns" :data="messageData" @on-selection-change="messageTableChange" class="mt-10">
            </Table>
            <div class="d-f jc-sb ai-c mt-10">
                <div>
                    <Button @click="delMessage">删除</Button>
                    <Button @click="readMessageLogBatch">标记为已读</Button>
                    <Button @click="readMessageLogAll">全部标记为已读</Button>
                </div>
                <Page
                    :total="totalElements"
                    :page-size="size"
                    @on-change="changePage"
                    @on-page-size-change="changePageSize"
                    show-sizer
                    :page-size-opts="[5, 10, 20, 30, 40]"
                    show-total
                    class="ta-r"></Page>
            </div>
        </div>


        <Spin size="large" fix v-show="showSpin">
            {{spinMsg}}
        </Spin>
    </div>
</template>

<script>
export default {
    name: 'myMessage',
    data () {
        return {
            showSpin: false,
            spinMsg: '加载中，请稍后...',
            messageTypeModel: 0,
            messageTypeList: [
                {
                    code: 'ALL',
                    description: '全部'
                }
            ],
            messageData: [],
            messageColumns: [
                {
                    type: 'selection',
                    width: 60,
                    align: 'center'
                },
                {
                    title: '标题内容',
                    key: 'content',
                    align: 'center',
                    minWidth: 200,
                    maxWidth: 500,
                    render: (h, params) => {
                        return h('div', {
                            style: {
                                display: 'flex',
                                alignItems: 'center'
                            }
                        }, [
                            h(params.row.isRead ? '' : 'span', {
                                style: {
                                    width: '10px',
                                    height: '10px',
                                    borderRadius: '50%',
                                    backgroundColor: 'blue',
                                    marginRight: '10px'
                                }
                            }, params.row['name']),
                            h('a', {
                                style: {
                                    flex: '1'
                                },
                                props: {},
                                on: {
                                    click: () => {
                                        this.goToBacklogModule(params.row.id, params.row.link, params.row.isRead);
                                    }
                                }
                            }, params.row.content)
                        ]);
                    }
                },
                {
                    title: '提交时间',
                    key: 'sendTime',
                    align: 'center',
                    minWidth: 200,
                    maxWidth: 500,
                    render: (h, params) => {
                        return h('span', {

                        }, params.row.sendTime);
                    }
                },
                {
                    title: '消息类型',
                    key: 'title',
                    minWidth: 200,
                    maxWidth: 500,
                    align: 'center'
                }
            ],
            totalElements: 1,
            page: 0,
            size: 10
        };
    },
    mounted () {
        this.messageTypeList = [...this.messageTypeList, ...JSON.parse(localStorage.getItem('dictionary')).MESSAGE_LOG_TYPE];
        this.getFindMessageLogListByPage();
        this.getCountByMessageLogNotRead();
    },
    methods: {
        goToBacklogModule (id, link, isRead) {
            if (!id && !link) {
                return;
            }
            if (!isRead) {
                this.showSpin = true;
                depot.post({
                    url: this.URL.MESSAGE.READ_MESSAGELOG_BATCH,
                    data: [id],
                    cb: (data) => {
                        this.showSpin = false;
                        if (data.code === 0) {
                            // 刷新列表
                            this.getFindMessageLogListByPage();
                        } else if (data.code === 999) {
                            this.$Message.error(data.message);
                        }
                    },
                    ce: (error) => {
                        this.showSpin = false;
                    }
                });
            }
            // 跳转页面
            this.$router.push({
                name: link
                // params: {
                //     missionId: resourceId
                // }
            });
        },
        // 获取未读信息的数量
        getCountByMessageLogNotRead () {
            this.showSpin = true;
            depot.get({
                url: this.URL.MESSAGE.COUNT_BY_MESSAGELOG_NOT_READ,
                cb: (data) => {
                    this.showSpin = false;
                    if (data.code === 0) {
                        let messageCount = data.data;
                        this.$store.commit('setMessageCount', messageCount);
                    } else if (data.code === 999) {
                        this.$Message.error(data.message);
                    }
                },
                ce: (error) => {
                    this.showSpin = false;
                }
            });
        },
        // 获取消息中心列表方法
        getFindMessageLogListByPage (changeMessageType) {
            this.showSpin = true;
            let queryParams = {};
            queryParams.page = this.page;
            queryParams.size = this.size;
            if (changeMessageType) {
                queryParams.type = changeMessageType;
                if (changeMessageType === 'ALL') {
                    queryParams.type = '';
                }
            }
            depot.get({
                url: this.URL.MESSAGE.FIND_MESSAGELOG_LIST_BY_PAGE,
                config: {
                    params: queryParams
                },
                cb: (data) => {
                    this.showSpin = false;
                    if (data.code === 0) {
                        if (data.data.content.length) {
                            this.messageData = data.data.content;
                            this.size = data.data.size;
                            this.totalElements = data.data.totalElements;
                            console.log(this.messageData, 'this.messageData');
                        } else {
                            this.messageData = [];
                            this.size = data.data.size;
                            this.totalElements = data.data.totalElements;
                        }
                    } else if (data.code === 999) {
                        this.$Message.error(data.message);
                    }
                },
                ce: (error) => {
                    this.showSpin = false;
                }
            });
            this.getCountByMessageLogNotRead();
        },
        // 选择消息类型方法
        changeMessageType (val) {
            console.log(val, 123);
            this.page = 0;
            this.size = 10;
            this.getFindMessageLogListByPage(val);
        },
        // 消息列表多选触发方法
        messageTableChange (selection) {
            console.log(selection, 456);
            this.selectionIds = selection.map(v => v.id);
        },
        // 翻页
        changePage (val) {
            this.page = val - 1;
            this.getFindMessageLogListByPage();
        },
        // 修改页面数据量
        changePageSize (val) {
            this.size = val;
            this.getFindMessageLogListByPage();
        },
        // 删除消息
        delMessage () {
            if (this.selectionIds.length > 0) {
                this.$Modal.confirm({
                    title: '确认提示',
                    content: '确认要删除吗？',
                    loading: true,
                    onOk: () => {
                        this.showSpin = true;
                        let ids = [];
                        ids = this.selectionIds;
                        depot.post({
                            url: this.URL.MESSAGE.RECOVERY_MESSAGELOG_BATCH,
                            data: ids,
                            cb: (data) => {
                                this.showSpin = false;
                                if (data.code === 0) {
                                    this.$Message.info('删除成功');
                                    this.$Modal.remove();
                                    this.selectionIds = [];
                                    this.getFindMessageLogListByPage();
                                } else if (data.code === 999) {
                                    this.$Message.error(data.message);
                                }
                            },
                            ce: (error) => {
                                this.showSpin = false;
                            }
                        });
                    },
                    onCancel: () => {
                        this.$Message.info('取消删除');
                    }
                });
            } else {
                this.$Message.error('请选择要删除条目');
            }
        },
        // 批量标记为已读
        readMessageLogBatch () {
            if (this.selectionIds.length > 0) {
                this.showSpin = true;
                let ids = [];
                ids = this.selectionIds;
                depot.post({
                    url: this.URL.MESSAGE.READ_MESSAGELOG_BATCH,
                    data: ids,
                    cb: (data) => {
                        this.showSpin = false;
                        if (data.code === 0) {
                            this.selectionIds = [];
                            this.getFindMessageLogListByPage();
                        } else if (data.code === 999) {
                            this.$Message.error(data.message);
                        }
                    },
                    ce: (error) => {
                        this.showSpin = false;
                    }
                });
            } else {
                this.$Message.error('请选择要标记条目');
            }
        },
        // 全部标记为已读
        readMessageLogAll () {
            this.showSpin = true;
            depot.post({
                url: this.URL.MESSAGE.READ_MESSAGELOG_ALL,
                cb: (data) => {
                    this.showSpin = false;
                    if (data.code === 0) {
                        this.getFindMessageLogListByPage();
                    } else if (data.code === 999) {
                        this.$Message.error(data.message);
                    }
                },
                ce: (error) => {
                    this.showSpin = false;
                }
            });
        }
    }
};
</script>

